ReactNativeの開発環境構築で、インストール時にエラーになったので対処法をまとめました。
エラーの内容
$ npx react-native init MyApp --template react-native-template-typescript
Need to install the following packages:
react-native@0.70.6
Ok to proceed? (y) y
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
✔ Downloading template
✔ Copying template
✔ Processing template
✖ Installing Bundler
error /Library/Ruby/Site/2.6.0/rubygems.rb:265:in `find_spec_for_exe': can't find gem bundler (>= 0.a) with executable bundle (Gem::GemNotFoundException)
from /Library/Ruby/Site/2.6.0/rubygems.rb:284:in `activate_bin_path'
from /usr/bin/bundle:23:in `<main>'
✖ Installing Bundler
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Error: Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
at createFromTemplate (~/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/commands/init/init.js:169:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.initialize [as func] (~/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/commands/init/init.js:222:3)
at async Command.handleAction (~/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/index.js:140:9)
info Run CLI with --verbose flag for more details.原因
Setting up the development environment
調べてみると(というかエラーメッセージに書いていますが)、rubyのgemを使っていて、それがうまく動作していないというのと、バージョンが合っていないという内容でした。
調査
$ ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin22]
$ which ruby
/usr/bin/ruby
$ gem -v
3.3.20
$ bundler -v
/Library/Ruby/Site/2.6.0/rubygems.rb:265:in `find_spec_for_exe': can't find gem bundler (>= 0.a) with executable bundler (Gem::GemNotFoundException)
from /Library/Ruby/Site/2.6.0/rubygems.rb:284:in `activate_bin_path'
from /usr/bin/bundler:23:in `<main>'
$ gem install bundler
Fetching bundler-2.3.26.gem
Successfully installed bundler-2.3.26
Parsing documentation for bundler-2.3.26
Installing ri documentation for bundler-2.3.26
Done installing documentation for bundler after 0 seconds
1 gem installed
$ bundler -v
Bundler version 2.3.26私の環境だと、bundler自体壊れていそうでした。その場合はgem install bundlerで再インストールしてなおしました。
対策
rubyのversionを合わせなきゃいけないので、 rbenvでインストールすることにしました。
anyenvでrubyの環境構築
1. anyenv, rbenvのインストール
$ brew install anyenv
$ anyenv install --init
$ code ~/.bash_profile.bash_profileに以下を追加
# anyenv
export PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"反映を確認
$ source ~/.bash_profilerbenvとruby2.7.5をインストール
$ anyenv install rbenv
$ rbenv install 2.7.5
$ rbenv global 2.7.5
$ which ruby
~/.anyenv/envs/rbenv/shims/ruby
$ ruby -v
ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [arm64-darwin22]2. 再度ReactNativeをインストール
$ npx react-native init MyApp --template react-native-template-typescript